<template>
  <div class="container">
    <el-card >
      <!-- 头部输入框部分 -->
      <el-form :inline="true" class="yi">
        <el-form-item label="关键词:" class="input" >
          <el-input v-model="listpage.keyword" size="small"  ></el-input>
        </el-form-item>
        <el-form-item right class="button-right">
          <el-button size="small" @click="emptyinput"> 清除</el-button>
          <el-button size="small" type="primary" @click="getRandomsList"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 消息提示部分 -->
      <el-alert :title="'数据一共'+this.counts+'条'" type="info" show-icon :closable ="false"></el-alert>
    

    <!-- 表单部分 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="编号"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="70px">
        <template slot-scope="scope">
          <div v-if="scope.row.questionType == 3">简答</div>
          <div v-else-if="scope.row.questionType == 1">单选</div>
          <div v-else>多选</div>
        </template>
      </el-table-column>
      <el-table-column prop="questionIDs" label="题目编号">
        <template slot-scope="scope">
          <el-link
            type="primary"
            v-for="(itme, index) in scope.row.questionIDs"
            :key="index"
            @click="handelxiangqing(scope.row ,index)"
            >{{ itme.number }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间"> </el-table-column>
      <el-table-column prop="totalSeconds" label="答题时间(s)">
      </el-table-column>
      <el-table-column prop="accuracyRate" label="正确率(%)"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="mouseAfter"
            icon="el-icon-delete"
            size="mini"
            type="danger"
             plain
            circle
            width="70px"
            @click="removelist(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
     </el-table>

       <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listpage.page"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="listpage.pagesize"
      layout="  prev, pager,next,sizes,jumper"
      :total="counts"
      background
      class="pagination"
    >
    </el-pagination>

    <!-- 对话框 -->

    <el-dialog title="题目预览"  :visible.sync="dialogVisible" @close='dialogVisiblehandle' width="50%">
      <el-row :gutter="20" >
        <el-col :span="6"  ><span class="grid-content bg-purple">【题型】:</span>
            <span v-if="tikuList.questionType ==3">简答</span>
            <span v-else-if="tikuList.questionType ==1">单选</span>
            <span v-else>多选</span>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【编号】:{{tikuList.id}}</div></el-col>
        <el-col :span="6"><span class="grid-content bg-purple">【难度】: </span>
            <span v-if="tikuList.difficulty===1">简单</span> 
            <span v-else-if="tikuList.difficulty===2">一般</span> 
            <span v-else>困难</span>     
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【标签】:{{tikuList.tags}}</div></el-col>
      </el-row>
      <el-row :gutter="20" class="boxmagie">
        <el-col :span="6"><div class="grid-content bg-purple">【学科】:{{tikuList.subjectName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【目录】:{{tikuList.directoryName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【方向】:{{tikuList.direction}}</div></el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col ><div class="grid-content bg-purple">【题干】: </div>
          <div v-html="tikuList.question" class="vhtml"></div>
          <div> 
            <span v-if="tikuList.questionType ==3">简答</span>
            <span v-else-if="tikuList.questionType ==1">单选题</span>
            <span v-else>多选题</span>
            <span>  选项:(为以下选择框选择正确答案)</span>

           <!-- 选择框部分 -->
            <el-form >
              <el-form-item v-if="tikuList.questionType ==1" >
                 <el-radio v-for="(itme,index) in tikuList.options" class="huanghang disabled"   :key="index" v-model="itme.isRight" :label="1" >{{itme.title}}</el-radio>
              </el-form-item>
              <el-form-item v-else-if="tikuList.questionType ==2" >
                 <el-checkbox  v-for="(itme,index) in tikuList.options" class="huanghang disabled" :key="index" :checked="itme.isRight==1">{{itme.title}}</el-checkbox>
              </el-form-item>
            </el-form>
            </div> 
        </el-col>
      </el-row>
      <hr>
       <el-row >
          <el-col >
            <span class="grid-content bg-purple"></span> 
          <el-button type="danger" @click="hodivivo">视频答案预览</el-button>
          <div class="reference-answer" v-if="referenceAnswer === true" >
            <video class="reference-video" :src="tikuList.videoURL" controls width="100%" autoplay ></video>
          </div>
          </el-col>
      </el-row>
       <hr>
       <el-row >
        <el-col >【答案解析】:<span class="grid-content bg-purple" v-html="tikuList.answer" ></span> </el-col>
      </el-row>
       <hr>
       <el-row>
        <el-col ><div class="grid-content bg-purple">【题目备注】: {{tikuList.remarks}}</div></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from "@/api/hmmm/questions.js";
export default {
  name: "randoms.vue",
  data() {
    return {
      //  表单数据保存
      list: [],

      listpage: {
        //   查询参数 ,搜索框绑定数据
        keyword: "",
        // 当前页码
        page: 1,
        // 当前显示页码
        pagesize: 20,
      },
      // 总页数
      counts: 0,
      // 对话框的开关
      dialogVisible: false,
      // 精选题库列表
      tikuList: [],
      // // 复选框选中
      //  checked:''
      // 视频框
      referenceAnswer:false
       
    };
  },
  created() {
    this.getRandomsList();
  },
  methods: {
    // 获取表单数据
    async getRandomsList() {
      try {
        const { data } = await randoms(this.listpage);
        // console.log(data);
        this.list = data.items;
        // 赋值总页数
        this.counts = data.counts;
        //  console.log(this.list);
      } catch (error) {
        this.$message.error("获取列表失败");
      }
    },
    // 清空搜索框
    emptyinput() {
      this.listpage.keyword = "";
      this.getRandomsList();
    },

    // 监听当前页面实现条数变化
    handleSizeChange(val) {
      // console.log(val);
      this.listpage.pagesize = val;
      this.getRandomsList();
    },
    // 监听当前页码发生变化
    handleCurrentChange(val) {
      this.listpage.page = val;
      this.getRandomsList();
    },
    // 删除事件
    async removelist(row) {
      const a = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (a == "cancel") return this.$message.info("已取消删除");
      try {
        await removeRandoms(row);
        this.getRandomsList();
        this.$message.success("删除成功");
      } catch (err) {
        // console.log(err);
        this.$message.error("删除失败");
      }
    },
    // 对话框事件
    async handelxiangqing(row,index) {
      this.dialogVisible = true;
      // console.log(row);

      try {
        const id = row.questionIDs[index]
        // console.log(id);
        const { data } = await detail(id); 
        console.log(data);
        this.tikuList = data
        // console.log(this.tikuList(id));
      } catch (err) {
        console.log(err);
        this.$message.error("获取数据失败");
      }
    },
    // 视频框事件
    hodivivo() {
        this.referenceAnswer = true
    },
    // 弹框关闭时视频关闭
    dialogVisiblehandle() {
      this.referenceAnswer=false
    }
  },
 
};
</script>

<style scoped >
.el-card {
  margin: 10px;
}
.button-right {
  float: right;
}
.el-table {
  padding-left: 20px;
}
.el-alert {
  margin: 0  0  20px  0 ;
  font-size: 16px;
}
.el-table[data-v-48a0d8d3] {
  padding-left:0 ;
}

/* .spancolor {
  color: #0ea5fa;
  cursor: pointer;
} */
.mouseAfter:hover {
  background-color: #f56c6c;
  color: #fff;
}
.el-dialog__footer {
  text-align: center !important;
}
.boxmagie {
  margin: 30px 0 0 0  ;

}
.vhtml {
  color: #409EFF;
}
.huanghang {
  width: 100%;
}
.disabled{
    pointer-events: none;
}

.reference-answer {
  width: 440px;
  height: 330px;
}
 .reference-video {
   padding: 40px 0 ;
}
.pagination{
  float: right;
  margin: 20px 0 ;
}

/deep/.el-dialog__footer {
    text-align: center;
}
/deep/.el-pagination__jump {
  margin-left: 0;
}
.yi {
  padding-left: 30px;
}
.yi input {
  width: 25%;
}
</style>
